<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../common/css/reset.css">
  <script src="../common/js/rem.js"></script>


  <style>
    .reg{ padding: 0.8rem; }
    .reg_close{ position: absolute; right: 0.8rem; top: 0.8rem; height: 0.5333rem; }
    .reg_title{ margin-top: 0.4888rem; }
    .reg_list_box{ margin-top: 1.2rem;}
    .reg_list{ height: 1.3333rem; border-bottom: 1Px solid rgba(0, 0, 0, 0.05); margin-bottom: 0.4rem; }
    .list_write_input{ height: 100%; width: 100%; }
    .reg_list_ma{ display: flex; display: -webkit-flex; justify-content: space-between;}
    .list_ma_input{ flex: 1; }
    .ma_btn{ width: 2.5rem }
    .reg_btn{ margin-top: 1rem; }
  </style>
</head>
<body>
  <div class="reg">
    <img class="reg_close" src="../common/icon/user/close.jpg" alt="">
    <div class="reg_title f52 col_33">注册</div>
    <div class="reg_list_box">
      <div class="reg_list">
        <input class="list_write_input f32" id="phone" type="text" placeholder="请输入手机号" maxlength="11">
      </div>
      <div class="reg_list reg_list_ma">
        <input class="list_ma_input f32" id="phoneMa" type="text" placeholder="请输入手机验证码">
        <input class="ma_btn f32 col_33" id="maBtn" type="button" value="获取验证码">
      </div>
      <div class="reg_list">
        <input class="list_write_input f32" id="pass" type="password" placeholder="请设置6-12位数密码">
      </div>
      <div class="reg_list">
        <input class="list_write_input f32" id="surePass" type="password" placeholder="请确认密码">
      </div>
      <div class="reg_list">
        <input class="list_write_input f32" id="yaoPhone" type="text" placeholder="请输入邀请人手机号(选填)" maxlength="11">
      </div>
    </div>
    <div class="global_btn reg_btn" id="regBtn">注册</div>
  </div>

  <script src="../common/js/jquery.min.js"></script>
  <script src="../common/js/layer.js"></script>
  <script>
    // 验证码倒计时
    function settime(num) {
      var yzm_input = document.getElementById("maBtn");
      var num;
      if (num == 0) {
      regcode = true;
      yzm_input.value = "重新发送";
      yzm_input.removeAttribute("disabled");
      return false; //直到倒计时0时停止执行函数
      } else {
      yzm_input.setAttribute("disabled", "disabled");
      yzm_input.value = num + "s后重发";
      num--;
      }
      setTimeout("settime(" + num + ")", 1000);
    }
    $("#maBtn").click(function(){
      settime(60)
    })

    // 点击完成按钮
    $("#regBtn").click(function(){
      if(!$("#phone").val()){
        layer.open({
        content: '请输入手机号',
        skin: 'msg',
        time: 1
      });
      return;
      }else if(!(/^1[3456789]\d{9}$/.test($("#phone").val()))){
      layer.open({
      content: '手机号格式不正确',
      skin: 'msg',
      time: 1
      });
      return;
      }else if(!$("#phoneMa").val()){
      layer.open({
      content: '验证码不能为空',
      skin: 'msg',
      time: 1
      });
      }else if(!$("#pass").val()){
      layer.open({
      content: '密码不能为空',
      skin: 'msg',
      time: 1
      });
      }else if($("#surePass").val()!==$("#pass").val()){
      layer.open({
      content: '两次密码输入不一致',
      skin: 'msg',
      time: 1
      });
      } else {
      layer.open({
      content: '注册成功',
      skin: 'msg',
      time: 1
      });
      }
    })

  </script>
</body>
</html>
